<template>
	<view class="setUp">
		<view class="infobox">
			<div class="fromItem">
				<view class="f_name">头像</view>
				<view class="f_content">
					<image src="../../../static/logo.png" class="headpic"></image>
				</view>
			</div>
			<div class="fromItem">
				<view class="f_name">昵称</view>
				<view class="f_content">
					<input type="text" class="input" v-model="userinfo.nickName"/>
				</view>
			</div>
			<div class="fromItem">
				<view class="f_name">收货人</view>
				<view class="f_content">
					<input type="text" class="input" v-model="userinfo.name"/>
				</view>
			</div>
			<div class="fromItem">
				<view class="f_name">手机号</view>
				<view class="f_content">
					<input type="text" class="input" v-model="userinfo.phone"/>
				</view>
			</div>
			<div class="fromItem">
				<view class="f_name">地址</view>
				<view class="f_content">
					<textarea class="textArea" v-model="userinfo.address"/>
				</view>
			</div>
			<div class="fromItem">
				<view class="f_name">账号</view>
				<view class="f_content">
					<input type="text" class="input" v-model="userinfo.accNum"/>
				</view>
			</div>
			<div class="fromItem">
				<view class="f_name">密码</view>
				<view class="f_content">
					<input type="text" class="input" v-model="userinfo.password"/>
				</view>
			</div>
		</view>
		<view class="determine">修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{}
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../static/style/mixin.scss';

	.setUp {
		@include bg2;
		padding-top: 20upx;

		.infobox {
			@include w_box;

			.fromItem {
				@include ends;
				border-bottom: 1upx solid #00000030;
				min-height: 100upx;
				.f_content{
					.headpic{
						width: 150upx;
						height: 150upx;
						border-radius: 50%;
					}
					.input{
						text-align: right;
						width: 400upx;
						height: 50upx;
					}
					.textArea{
						width: 400upx;
						padding: 20upx;
						height: 240upx;
					}
				}
			}

			.fromItem:last-child {
				border-bottom: none;
			}
		}

		.determine {
			width: 720upx;
			height: 100upx;
			@include cc;
			border-radius: 10upx;
			background-image: linear-gradient(90deg, aqua, #f89);
			margin: 20upx auto;
		}
	}
</style>
